<template>
	<view style="display: flex; align-items: center; margin-bottom: 20rpx;">
		<view class="search-input">
			<uni-easyinput
				:placeholder="placeholder"
				confirmType="search"
				v-model="valueProxy"
				@confirm="onConfirm"
				@input="onInput"
				:focus="autofocus"
				prefix-icon="search"
				background-color="#3f3f3f1a"
				clearable
				:input-border="true"
				:primary-color="primaryColor"
				:styles="{ borderColor: '#3f3f3f1a', backgroundColor: '#3f3f3f1a' }"
			>
			</uni-easyinput>
		</view>
		<button
			type="primary"
			size="mini"
			style="margin-left: 16rpx; border-radius: 12rpx; height: 64rpx; line-height: 64rpx; font-size: 28rpx; background-color: #C6282B; color: #fff;"
			@click="onSearchClick"
		>
			搜索
		</button>
	</view>
</template>

<script>
	export default {
		name: 'SearchBox',
		props: {
			modelValue: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '仓库名称'
			},
			primaryColor: {
				type: String,
				default: '#3f3f3f1a'
			},
			autofocus: {
				type: Boolean,
				default: false
			}
		},
		emits: ['update:modelValue', 'search', 'input', 'confirm'],
		computed: {
			valueProxy: {
				get() {
					return this.modelValue
				},
				set(val) {
					this.$emit('update:modelValue', val)
				}
			}
		},
		methods: {
			onConfirm() {
				this.$emit('confirm', this.modelValue)
				this.$emit('search', this.modelValue)
			},
			onInput(val) {
				this.$emit('input', val)
			},
			onSearchClick() {
				this.$emit('search', this.modelValue)
			}
		}
	}
</script> 
<style lang="scss" scoped>
.search-box {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  background-color: #3f3f3f;
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.search-input {
  position: relative;
  flex: 1;
}
</style>